<template>
  <div>
      <!-- 时间 -->
      <div class="addtime">
          <h3 class="colos">次日达·礼拜五专享</h3>
          <div class="addtime-txt">
              <h3>
                  <span>选择送达时间：<i>{{tims}}{{timers}}</i></span>
                  <span @click="timeChang()"><i></i>点击修改</span>
              </h3>
              <div class="timers" v-show="bol">
                  <i class="tijian"></i>
                  <div class="timersb">
                      <table>
                          <tr>
                              <td @click="changTimer(v3)" v-for="(ins3,v3) in addTimer" :key="v3" v-show="v3<5">{{ins3}}</td>
                          </tr>
                          <tr>
                              <td @click="changTimer(v3)" v-for="(ins3,v3) in addTimer" :key="v3" v-show="v3>4">{{ins3}}</td>
                          </tr>
                      </table>
                  </div>
                  <div class="tim-btn">
                      <span @click="gono()">取消</span>
                      <span @click="goyes()">确定</span>
                  </div>

              </div>
          </div>

      </div>

  </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'AddTimer',
    data(){
        return{
            timers:'10:00-13:00',
            timersN:'',
            tims:'',
            bol:false,
            addTimer:['10:00-13:00','11:00-14:00','12:00-15:00','13:00-16:00','14:00-17:00','15:00-18:00','16:00-19:00' ,'17:00-20:00','18:00-21:00','19:00-22:00'],
        }
    },
    beforeMount(){
         this.timeDate();
    },
    mounted(){
    },
    methods:{
        // 年月日
        timeDate(){
            var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth()+1;//得到月份
            var date = now.getDate();//得到日期
            var str=year+'年'+month+'月'+date+'日';
            console.log(str);
            this.tims=str;

        },
        changTimer(v3){
            console.log(v3);
            this.timersN=this.addTimer[v3];
        },
        gono(){
            this.bol=!this.bol;
        },
        goyes(){
            this.timers=this.timersN;
            this.bol=!this.bol;
        },
        timeChang(){
            this.bol=!this.bol;
        },

        // axios地址列表,接口
        addressData(){
            // 获取收货地址列表
            axios({
                method:'get',
                url:'/api/small/user/verify/v1/receiveAddressList',
                headers:{
                    userId:this.obj[0].userId,
                    sessionId:this.obj[0].sessionId
                }
            }).then(res=>{
                console.log(res.data);
                var aa=res.data.result;
                for(var i=0;i<aa.length;i++){
                    this.bb=res.data.result[i].address;
                    var newbb=this.bb.split(' ');
                    var obj={
                        name:res.data.result[i].realName,
                        ad:newbb,
                        phone:res.data.result[i].phone,
                        addId:res.data.result[i].id,
                    };
                    this.warr1[i]=obj;
                }
                    console.log(this.warr1);

            });
        },
         // 增加收货地址
        postAddress(){
            var arr={
                realName:'但小兵7',
                phone:'15032203562',
                address:'北京 北京市 海淀区 天通苑明天第一城4号楼108',
                zipCode:'101010',
            }
            axios({
                method:'post',
                url:'/api/small/user/verify/v1/addReceiveAddress',
                params:obj,
                headers:{
                    userId:this.obj[0].userId,
                    sessionId:this.obj[0].sessionId
                }
            }).then(res=>{
                console.log(res.data);
            });
        },
        // 设置默认收货地址
        addDefault(){
            var obj={
                id:this.id
            };
            axios({
                method:'post',
                url:'/api/small/user/verify/v1/setDefaultReceiveAddress',
                params:obj,
                headers:{
                    userId:this.obj[0].userId,
                    sessionId:this.obj[0].sessionId
                }

            }).then(res=>{
                console.log(res.data);
            });
        },
    }

}
</script>

<style scoped>
/* 添加收货地址 */

/*  */
.tijian{
    position: absolute;
    top: -11px;
    left: calc(50% - 10px);
    height: 20px;
    width: 20px;
    border-right:1px solid #d3d3d3 ;
    border-top:1px solid #d3d3d3 ;
    background-color: #f8fff7;
    transform: rotate(-45deg);
}
.timers{
    width: 505px;
    background-color: #f8fff7;
    border: #d3d3d3 1px solid;
    padding: 20px;
    position: relative;
    margin:20px 0 20px 150px;
}
.timers .timersb{
    width: 100%;
    margin-bottom: 20px;
}
.timers .timersb {
    text-align: center;
    display: inline-block;
    width: 100px;
    line-height: 30px;
    background-color: #fff;
}
.timersb table{
    border: 1px solid #d3d3d3;
    width: 506px;
    border-collapse: collapse;
}
.timersb table td{
    width: 100px;
    border: 1px solid #d3d3d3;
    cursor: pointer;
}
.tim-btn{
    width: calc(100% - 240px);
    padding: 0 120px;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    display: flex;
    justify-content: space-evenly;
    /* background-color: #fff; */
    
}
.tim-btn span{
    display: inline-block;
    width: 90px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
}
.tim-btn span:nth-child(1){
    background-color: #999;
}
.tim-btn span:nth-child(2){
    background-color: #f08200;
}
/* 送达时间 */

.addtime{
    width: 1280px;
    text-align: left;
    border-bottom: 1px solid #d3d3d3;
    margin: 0 auto;
}
.addtime .colos{
    color: #498e3d;
    font-size: 18px;
    line-height: 60px;
}
.addtime-txt{
    font-size: 16px;

}
.addtime-txt>h3>span{
    line-height: 33px;
    font-size: 16px;
    color: #666;
}
.addtime-txt>h3>span>i{
    color: #333;
    margin-left: 20px;
}
.addtime-txt>h3 span:nth-of-type(2){
    line-height: 33px;
    font-size: 16px;
    color: #498e3d;
    margin-left: 5px;
    cursor: pointer;
}
.addtime-txt>h3 span:nth-of-type(2) i{
    color: #333;
    height: 22px;
    width: 22px;
    display: inline-block;
    /* vertical-align: middle; */
    position: relative;
    top: 5px;
    background: url(../../../assets/imgs/green-note.png) no-repeat 0 0;
    margin-right: 9px;
}


/* 地址 */
.address{
    width: 100%;
}
.w-toph3{
    line-height: 58px;
    color: #6666;
    font-size: 18px;
    text-align: left;
    position: relative;
}
.w-toph3 span:nth-child(2){
    position: absolute;
    right: 0;
    top: calc(50% - 15px);
    line-height: 30px;
    width: 90px;
    text-align: center;
    font-size: 14px;
    background-color: #f08200;
    color: #fff;
}
/* public */
.w{
    width: 1280px;
    margin: 0 auto;
}
.wb{
    width: 100%;
   border-bottom: 1px solid #ddd;
}
</style>